<template>
    <el-container>
        <el-header class="row">
            <div class="col">课程名称:{{ data?.name }}</div>
        </el-header>
        <el-container>
            <el-header>
                <el-button class="position-relative">
                    <router-link class="stretched-link" :to="{ name: '查看课程' }">查看课程</router-link>
                </el-button>
                <el-button class="position-relative">
                    <router-link class="stretched-link" :to="{ name: '课程小节s' }">课程小节s</router-link>
                </el-button>
                <el-button class="position-relative">
                    查看资源
                </el-button>
            </el-header>
            <router-view :ID="Number(ID)" :start="start">
            </router-view>
        </el-container>
    </el-container>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { asyncmiaoadminselectcourse } from "../../../api/index";
import Alymodel from "../../../mysql_interface/model";
const prop = defineProps<{ ID: number }>()

const data = ref<Alymodel.IMcourse>()


async function start() {
    const { rows } = await asyncmiaoadminselectcourse({ ID: prop.ID });
    data.value = rows[0];
}


onMounted(() => {
    start()
})

watch(() => prop.ID, () => {
    start()
})

</script>

<style scoped>
.router-link-active {
    color: cadetblue;
}
</style>